@extends('layout.app')
@section('title','Центры')
@section('content')
    <div class="flex justify-between items-center">

    <h1 class="text-[#232323] text-[40px] font-medium">Список инструкторов</h1>
    <div class="flex gap-[10px]">

        <a href="{{ route('instructors.add') }}" class="flex gap-[10px] bg-[#3042D0] text-white rounded-[5px] p-[15px] inline-block">

            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                <path d="M11.6673 2.16663H5.00065C4.55862 2.16663 4.1347 2.34222 3.82214 2.65478C3.50958 2.96734 3.33398 3.39127 3.33398 3.83329V17.1666C3.33398 17.6087 3.50958 18.0326 3.82214 18.3451C4.1347 18.6577 4.55862 18.8333 5.00065 18.8333H15.0007C15.4427 18.8333 15.8666 18.6577 16.1792 18.3451C16.4917 18.0326 16.6673 17.6087 16.6673 17.1666V7.16663L11.6673 2.16663Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M11.666 2.16663V7.16663H16.666" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M10 15.5V10.5" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M7.5 13H12.5" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>Добавить инструктора</span>
        </a>

        <a href="{{ route('instructors.inactiveadd') }}"
           class="flex gap-[10px] bg-[#3042D0] text-white rounded-[5px] p-[15px] inline-block">

            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
                <path d="M11.6673 2.16663H5.00065C4.55862 2.16663 4.1347 2.34222 3.82214 2.65478C3.50958 2.96734 3.33398 3.39127 3.33398 3.83329V17.1666C3.33398 17.6087 3.50958 18.0326 3.82214 18.3451C4.1347 18.6577 4.55862 18.8333 5.00065 18.8333H15.0007C15.4427 18.8333 15.8666 18.6577 16.1792 18.3451C16.4917 18.0326 16.6673 17.6087 16.6673 17.1666V7.16663L11.6673 2.16663Z" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M11.666 2.16663V7.16663H16.666" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M10 15.5V10.5" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M7.5 13H12.5" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>Добавить неактивного инструктора</span>
        </a>

{{--        <button type="button" id="export_button"--}}
{{--                class="flex gap-[10px] bg-[#EB692C] text-white rounded-[5px] p-[15px] inline-block">--}}
{{--            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">--}}
{{--                <path d="M12.5 12.1667L16.6667 8.00004L12.5 3.83337" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>--}}
{{--                <path d="M3.33398 17.1667V11.3333C3.33398 10.4493 3.68517 9.60143 4.31029 8.97631C4.93542 8.35119 5.78326 8 6.66732 8H16.6673" stroke="white" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>--}}
{{--            </svg>--}}
{{--            <span>--}}
{{--                    Экспортировать--}}
{{--                </span>--}}
{{--        </button>--}}
    </div>
</div>
    <div class="bg-[#ffffff] py-[30px] px-[50px] mt-[40px]">



        <form action="{{ route('instructors') }}" method="GET" class="filter-form">
            @csrf
            @method('GET')

            <div class="grid grid-cols-8 gap-x-[20px] gap-y-[30px]">
                <div class="col-span-2 flex gap-[30px] flex-wrap flex-col">
                    <h2><b>Центр</b></h2>

                    <div class="flex flex-col gap-[20px]">
                        <select name="filters[centers_id][]" id="" multiple>
                            @foreach($centers as $center)
                                <option
                                    value="{{ $center->id }}" @selected(in_array($center->id,request('filters.centers_id') ?? []))>
                                    {{ $center->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>


                </div>
                <div class="col-span-2 flex gap-[30px] flex-wrap flex-col">
                    <h2><b>Виды спорта</b></h2>

                    <div class="flex flex-col gap-[20px]">
                        <select name="filters[sport][]" id="" multiple>
                            @foreach($sports as $sport)
                                <option
                                    value="{{ $sport }}" @selected(in_array($sport,request('filters.sport') ?? []))>
                                    {{ $sport }}
                                </option>
                            @endforeach
                        </select>

                    </div>


                </div>
                <div class="col-span-2 flex gap-[30px] flex-wrap flex-col">
                    <h2><b>Статус</b></h2>

                    <div class="flex flex-col gap-[20px]">
                        <select name="filters[status][]" id="" multiple>
                            @foreach($status as $st)
                                <option
                                    value="{{ $st }}" @selected(in_array($st,request('filters.status') ?? []))>
                                    {{ $st }}
                                </option>
                            @endforeach
                        </select>
                    </div>



                </div>
                <div class="col-span-2 flex gap-[30px] flex-wrap flex-col">
                    <h2><b>Поиск по фамилии</b></h2>

                    <div class="flex flex-col gap-[20px]">
                        <input value="{{ request('filters.second_name')[0] ?? '' }}" type="text" class="art-input" name="filters[second_name][]" placeholder="Поиск по фамилии">
                    </div>

                </div>
                <div class="col-span-2 flex items-end">
                    <input type="submit" value="Фильтровать" class="font-bold uppercase w-full bg-[#ffffff] border bordere-solid border-[#23232333] text-[232323] p-[15px] rounded-[5px]">
                </div>
            </div>


        </form>
    </div>
    @if(count($instructors) != 0)
        <table class="w-full my-[50px]" id="export_table">
            <tbody>
            <tr class="result-top">
                <th class="result-top__item">#</th>
                <th class="result-top__item">Имя</th>
                <th class="result-top__item">Фамилия</th>
                <th class="result-top__item">Отчество</th>
                <th class="result-top__item">Спорт</th>
                <th class="result-top__item">Пол</th>
                <th class="result-top__item">Активность</th>
                <th class="result-top__item">Фото</th>
                <th class="result-top__item">Сертификат</th>
                <th class="result-top__item">Статус</th>
                <th class="result-top__item">Переаттестация</th>
{{--                <th class="result-top__item">Командные игры</th>--}}
                <th class="result-top__item">Действия</th>
            </tr>
            @foreach ($instructors as $key => $instructor)

                <tr class="result-bottom">
                    <td class="">{{ ($currentPage - 1) * $perPage + $loop->iteration }}</td>
                    <td class="">{{ $instructor->name }}</td>
                    <td class=""> {{ $instructor->second_name }}</td>
                    <td class=""> {{ $instructor->surname }}</td>
                    <td class="">
                        @foreach($instructor->sports as $sport)
                            [{{ $sport->name }}]
                        @endforeach

                    </td>
                    <td class="">{{ $instructor->gender }}</td>
                    <td class="">{{ ($instructor->active) ? 'Активен' : 'Неактивен' }}</td>
                    <td class="">
                        <img src="{{ $instructor->photo }}">
                    </td>
                    <td class="">{{ $instructor->cert_valid }}</td>
                    <td class="">{{ $instructor->status }}</td>
                    <td class="">
                        @if($instructor->recertification == 0)
                            Нет
                        @else
                            Да
                        @endif</td>
{{--                    <td class="">--}}
{{--                        @if($instructor->teamGame == 0)--}}
{{--                            Нет--}}
{{--                        @else--}}
{{--                            Да--}}
{{--                        @endif--}}
{{--                    </td>--}}
                    <td class="">
                        <div class="flex items-center justify-between">
                            <a href="{{ route('instructors.edit', $instructor->id)  }}" class="p-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                     stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round"
                                          d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"/>
                                </svg>
                            </a>
                            <form action="{{ route('instructors.delete', $instructor->id)  }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="p-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
                                    </svg>
                                </button>
                            </form>
                        </div>

                    </td>

                </tr>
            @endforeach


            </tbody>
        </table>

        {{ $instructors->withQueryString()->links() }}

    @else

        <h1 class="text-2xl font-bold mt-[50px]">Данные не найдены</h1>
    @endif

@endsection
